<template>
    <div class="transaction">
        <el-header class="padding-0 header head" style="height:74px;">
            <el-row>
                <el-col :span="18">                   
                    <div class="header-left-item bg-light-blue">
                    <router-link to="/home" style="color:#fff;">DC</router-link>
                      
                    </div>  
                    <div class="header-left-item bg-dark-blue">
                        <div class="hand padding-10" @click="tabs.tabType=tabs.tabType=='userIn'? '':'userIn'">
                            <i class="icon-user-bg"  v-if="tabs.tabType == 'userIn'"></i>
                            <i class="icon-user" v-else ></i>
                            <p>个人</p>  
                        </div>
                    </div>                   
                    <div class="header-left-item bg-dark-blue">
                        <div class="hand padding-10" @click="tabs.tabType=tabs.tabType=='order'? '':'order'">
                                <i class="icon-order-bg" v-if="tabs.tabType == 'order'"></i>
                                <i class="icon-order" v-else></i>                           
                            <p>订单</p>
                        </div>
                    </div> 
                    <div class="header-left-item bg-dark-blue hide">
                        <div class="hand padding-10" @click="tabs.tabType=tabs.tabType=='message'? '':'message'">
                            <i class="icon-message-bg" v-if="tabs.tabType == 'message'"></i>
                            <i class="icon-message" v-else></i>                         
                            <p>消息</p>
                        </div>
                    </div>               
                     <div class="header-left-item header-border-add">
                             <i class="icon-add hand"  @click="tabs.tabType=tabs.tabType=='kind'? '':'kind'" ></i>
                           
                    </div>
                     <div class="header-left-item header-coin inline-block" v-show="this.selectCoin.length>0">
                        <div class="inline-block padding-0 coin-left">
                            <!-- <div class="inline-block">
                                <i class="icon-circle">28s</i>
                            </div> -->
                            <div class="inline-block coin-type"   v-for="(item,index) in selectCoin" :key="index" v-show="item.id == currentCoinId">
                                 <span>{{item.sysbol}}</span><br>
                                 <span style='font-size:14px' :class="item.minCashDeposi > 0 ? 'font-green':'font-red'">{{item.minCashDeposi}}</span>
                            </div>                                                                                    
                        </div>
                        <div class="inline-block padding-0 coin-right" style="border-left:2px solid #1a1b37;">
                            <i class="el-icon-close" style="margin-top:24px;font-size:34px;text-align:center;padding-left:18px;" @click="deleteCoin"></i>
                        </div> 
                    </div>
                    
                    <div class="header-left-item bg-dark-blue header-border-add hand"    v-for="(item,index) in selectCoin" :key="index" style="width:104px;" v-show="item.id != currentCoinId">
                        <div @click="currentCoinId=item.id">
                            <span style="width:auto">{{item.sysbol}}</span>
                            <p class="font-red">{{item.minCashDeposi}}</p>
                        </div>
                    </div>
                    <!-- <div class="header-left-item bg-dark-blue" style="width:104px;">
                        <div>
                            <span style="width:auto">ZCash</span>
                            <p class="font-gray">-0.38</p>
                        </div>
                    </div> -->
                   
                    <!--  左边固定的tabs  -->
                    <div class="tabs-content" v-show="tabs.tabType == 'userIn'">
                        <div class="tabs-one margin-top-24" >
                            <div class="tab-list">
                                <i class="icon-circle icon-list-user"></i> 
                                <span class="padding-left-5">用户名</span>
                                <!-- <i class="el-icon-arrow-right pull-right"></i> -->
                                <router-link :to="{path:'/user/index'}" class="el-icon-arrow-right pull-right hand" tag="i" ></router-link>
                            </div>
                            <div class="tab-list text-center hide" >
                                <el-button type="warning" @click="goAuthName()"> <i class="el-icon-warning-outline"></i> 未实名认证</el-button>
                            </div>
                            
                            <router-link :to="{path:'/user/recharge'}" tag="div" class="tab-list hand" >
                                  <i class="icon-circle icon-list-withdraw"></i> <span class="padding-left-5">充值/入金</span> 
                            </router-link>
                            <router-link :to="{path:'/user/withdraw'}" tag="div" class="tab-list hand" >
                                  <i class="icon-circle icon-list-withdraw"></i> <span class="padding-left-5">体现/出金</span> 
                            </router-link>
                            <div class="tab-list">
                                <div class="hand"  @click="tabs.userManage = !tabs.userManage" ><i class="icon-circle icon-list-management"></i> <span class="padding-left-5">账户管理</span> <i class="pull-right" :class="[tabs.userManage ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" ></i></div>
                                <ul v-show="tabs.userManage">
                                    <router-link :to="{path:'/user/account'}" tag="li" class="hand">  <i></i> 
                                        DC账户</router-link>
                                    <li class="hand hide">
                                        <i></i>
                                        银行卡</li>
                                </ul>
                            </div>
                            <div class="tab-list">
                                <div class="hand" @click="tabs.exchange = !tabs.exchange"><i class="icon-circle icon-list-record"></i> <span class="padding-left-5">交易记录</span> <i class="pull-right" :class="[tabs.exchange ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" ></i></div>
                                <ul v-show="tabs.exchange">
                                    <router-link :to="{path:'/user/rechargeRecord'}" tag="li" class="hand"> <i></i> 
                                         入金记录</router-link>
                                    <router-link :to="{path:'/user/withdrawRecord'}" tag="li" class="hand"> <i></i> 
                                          出金记录</router-link>
                                    <router-link :to="{path:'/user/orderRecord'}" tag="li" class="hand"> <i></i> 
                                          订单交易记录</router-link>

                                </ul>
                            </div>

                        </div>
                    </div>    
                    <div class="tabs-content"  v-show="tabs.tabType == 'order'" >
                        <div class="tabs-two" style="height:100%">
                                <el-tabs   v-model="activeName" style="height:100%" >
                                    <el-tab-pane   label="持仓定单" name="second" style="height: calc(100% - 63px);">
                                        <div v-if='this.holdOrderList.length > 0' style="max-height: 100%;overflow-y: auto;">
                                            <div class="tabs-two-list"  v-for="(item,index) in holdOrderList" :key="index"  style="padding:0 24px;">
                                                    <div style="line-height: 63px;font-size: 16px;">
                                                        <span class="title">{{item.symbol}}</span> 
                                                        <i class="el-icon-arrow-down hand" v-show="!item.isopen" @click=changeisOpen(item) style="margin-top:22px;"></i>
                                                        <i class="el-icon-arrow-up hand" v-show="item.isopen"  @click=changeisOpen(item) style="margin-top:22px;"></i>
                                                    </div> 
                                                    <div>
                                                        <span class="title font-gray">总收益</span>
                                                        <span class="pull-right" :class="item.totalEarnings>0?'font-green':'font-red'" >{{item.totalEarnings}}</span>
                                                    </div> 
                                                    <div class="margin-top-5">
                                                        <span class="title font-gray">总百分比</span>
                                                        <span class="pull-right" :class="item.totalRatio>0?'font-green':'font-red'">{{item.totalRatio}}</span>
                                                    </div>
                                                    <div class="margin-top-5">
                                                        <span class="title  font-gray">总保证金</span>
                                                        <span class="pull-right">{{item.totalInvestAmount}} USDT</span>
                                                    </div>
                                                     <!-- 订单  -->
                                                    <div v-show="item.isopen" class="list-detail-1 bg-light-gray margin-top-10 font-size-12" v-for="(i,index) in item.list" :key="index" >
                                                        <div>
                                                            <span class="title"><i class="el-icon-caret-top font-green"></i>{{i.buyPriceOne}}</span>
                                                            <span class="pull-right" :class="i.earningsAndInvestAmount>0?'font-green':'font-red'">{{i.earningsAndInvestAmount}}</span>
                                                        </div> 
                                                        <div class="margin-top-5">
                                                            <span class="title">{{i.earnings}}</span>
                                                            <span class="pull-right" :class="i.earningsRatio > 0?'font-green':'font-red'">{{i.earningsRatio}}</span>
                                                        </div> 
                                                        <!-- 点击展开 -->
                                                        <div v-show="i.isopen">
                                                            <div class="margin-top-5">
                                                                <span class="title font-gray">保证金</span>
                                                                <span class="pull-right">{{i.investAmount}}</span>
                                                            </div>
                                                            <div class="margin-top-5">
                                                                <span class="title font-gray">杠杆</span>
                                                                <span class="pull-right">X{{i.leverMultiple}}</span>
                                                            </div> 
                                                            <div class="margin-top-5">
                                                                <span class="title font-gray">当前价格</span>
                                                                <span class="pull-right">{{i.currentPrice}}</span>
                                                            </div> 
                                                            <div class="margin-top-5">
                                                                <span class="title font-gray">止盈</span>
                                                                <span class="pull-right"> {{i.targetProfit}}</span>
                                                                <span class="pull-right" :class="i.targetProfitRatio>0?'font-green':'font-red'">{{i.targetProfitRatio | toPercent}} &nbsp;&nbsp;</span>
                                                                
                                                            </div> 
                                                            <div class="margin-top-5">
                                                                <span class="title font-gray">止损</span>
                                                                <span class="pull-right"> {{i.stopLoss}}</span>
                                                                <span class="pull-right" :class="i.stopLossRatio>0?'font-green':'font-red'">{{i.stopLossRatio | toPercent}} &nbsp;&nbsp;</span>
                                                            </div> 
                                                            <el-row class="margin-top-10">
                                                                <el-col :span="12" >
                                                                    <el-button @click="doSet(i.currentPrice,i.earnings,i.earningsRatio,i.leverTradeId,i.targetProfit,i.stopLoss,i.investAmount)">
                                                                    <i class="el-icon-setting"></i>
                                                                        设定
                                                                    </el-button>
                                                                </el-col>
                                                                <el-col :span="12" class="text-right">
                                                                    <el-button @click="doClose(i.leverTradeId,i.currentPrice)">
                                                                        <i class="el-icon-close"></i>
                                                                        平仓
                                                                    </el-button>
                                                                </el-col>
                                                            </el-row>
                                                        </div>
                                                        
                                                        <div class="text-center margin-top-5">
                                                            <i class="el-icon-arrow-down font-size-14 font-gray hand" @click="changeisOpen(i)" v-show="!i.isopen"></i> 
                                                            <i class="el-icon-arrow-up font-size-14 font-gray hand" @click="changeisOpen(i)" v-show="i.isopen"></i> 
                                                        </div>
                                                    </div>
                                                    
                                            </div>
                                        </div>
                                        <div v-else class="text-center margin-top-100"> 
                                            暂无持仓订单
                                        </div>

                                        
                                    </el-tab-pane>    
                                    <el-tab-pane label="历史订单" class="hand" name="first">
                                        <div v-if='orderList.length > 0 '>
                                            <div class="tabs-two-header" v-if="false">
                                                <span  class="hand">2012</span>
                                                <el-dropdown class='pull-right hand'>
                                                    <span class="el-dropdown-link">
                                                        进行中<i class="el-icon-arrow-down el-icon--right"></i>
                                                    </span>
                                                    <el-dropdown-menu slot="dropdown">
                                                        <el-dropdown-item>进行中</el-dropdown-item>
                                                        <el-dropdown-item>未开始</el-dropdown-item>
                                                    </el-dropdown-menu>
                                                </el-dropdown>
                                            </div>
                                            <div class="tabs-two-list" style="padding:0 24px;"  v-for="(item,index) in orderList" :key="index">
                                                <div style="line-height: 63px;font-size: 16px;">
                                                    <i class="icon-circle hide"></i> {{formatDate(item.stockDate)}} <i class="el-icon-arrow-right pull-right hand" @click="goOrderDetail(item.tradeId,item.transactionType)" style="margin-top:22px;"></i>
                                                </div> 
                                                <div>
                                                    <span class="title">{{item.investProductName}}</span>
                                                    <span class="pull-right">{{item.investAmount | monely}}</span>
                                                </div>  
                                                <div class="margin-top-10">
                                                    <span class="font-green">{{item.earnings}}</span>
                                                    <span class="pull-right font-red">{{item.percent}}</span>
                                                </div>
                                            </div>
                                            
                                            <!-- 底部 -->
                                            <div class="tabs-two-header margin-top-10 " v-if="false">
                                                <span  class="hand">2020</span>
                                            </div>
                                        </div>
                                        <!--  else -->
                                        <div v-else class="text-center margin-top-100">
                                             没有一点历史
                                        </div>
                                    </el-tab-pane>
                                                             
                                </el-tabs>
                        </div>
                    </div>
                    <div class="tabs-content " v-show="tabs.tabType == 'message'">
                        <div class="tabs-two" >
                               <el-tabs   v-model="activeName">
                                    <el-tab-pane   class="hand" label="通知提醒" name="second">
                                    <div v-if='true'>
                                        <div class="tabs-two-list" style="padding:0 24px;">
                                            <div class="font-gray" style="line-height: 38px;font-size: 14px;">
                                                <span> 2.4 14:08</span>
                                                <span class="pull-right" >5.18 12:47:16</span>
                                            </div> 
                                             <div class="font-gray" style="line-height: 38px;font-size: 14px;">
                                                <span> 2.4 14:08</span>
                                                <span class="pull-right" >5.18 12:47:16</span>
                                            </div>
                                           
                                        </div>
                                    </div>
                                    <div v-else class="text-center margin-top-100"> 
                                        暂无持仓订单
                                    </div>                                        
                                    </el-tab-pane>    
                                    <el-tab-pane label="DC系统" class="hand" name="first">
                                        <div v-if="true">
                                            <div class="text-center margin-top-100">
                                                    暂无系统消息
                                            </div>
                                        </div>
                                        <!--  else -->
                                        <div v-else class="text-center margin-top-100">
                                             没有一点历史
                                        </div>
                                    </el-tab-pane>
                                                             
                                </el-tabs>
                        </div>                  
                    </div>

                    <div class="tabs-content" v-show="tabs.tabType == 'kind'">
                        <div class="tabs-kind" style="padding:20px;" >
                            <h3>货币</h3>
                            <div :class="exchangeType == 'lever' ? 'active' : '' " @click=" exchangeType = 'lever'"  class="hand">Crypto<span class="pull-right">120</span></div>
                            <div :class="exchangeType == 'options' ? 'active' : '' " @click=" exchangeType = 'options'" class="hand" >期权<span class="pull-right">120</span></div>
                        </div>                  
                    </div>

                    <div class="tabs-content-right"  v-show="tabs.tabType == 'kind'">
                        <div class="container">
                            <div class="div-list div-list-input"><el-input prefix-icon="el-icon-search" class="font-white"  v-model="search" placeholder="搜索数字货币"></el-input></div>
                            <!-- <div class="div-list"><span class="font-gray">热门</span>  <span class="font-gray pull-right">百分比</span></div>
                            <div class="div-list"><span>BTC/USDT</span>  <span class="font-green pull-right">+0.03%</span></div> -->
                            <div class="div-list margin-top-20">
                                <span class="font-size-12 font-gray">热门 <i class="el-icon-caret-bottom"></i> </span>  <span class="font-size-12 font-gray pull-right">百分比 <i class="el-icon-caret-bottom"></i> </span>
                            </div>
                            <div v-show="exchangeType" @click="changeCoin(item.id)" class="div-list margin-top-10 hand" v-for="(item,index) in exchangeArr[exchangeType]" :key="index">
                                <span>{{item.sysbol}}</span> <span class="font-green pull-right">+0.03%</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" style="height:73px;">
                    <div class="header-right-item pull-right ">
                        <div class="header-right-detail text-center" style="height:74px;width:316px;border-left:1px solid #1a1b37;">
                            <router-link :to="{path:'/user/recharge'}" tag="el-button" class="pull-right">充值</router-link>
                            <div class="inline-block pull-right text-left hand" @click="userState = true" style="width:120px;height:73px;margin-right:10px;">
                                <span  style="line-height:30px;font-size:16px;vertical-align:-16px;">{{$store.state.accountType == 1?'真实账户':'模拟账户'}}<i class="el-icon-arrow-down" v-show="!userState"></i><i v-show="userState" class="el-icon-arrow-up" style="vertical-align:4px;"></i></span>
                                <p style="margin-top:4px;">{{$store.state.accountType == 1?$store.state.userInfo.balance:$store.state.userInfo.vbalance}}</p>
                            </div>
                        </div>
                       
                    </div>


                    <!-- <div class="header-right-item pull-right  hide">
                        <div class="header-right-detail text-center" style="height:78px;width:316px;border-left:1px solid #1a1b37;">
                            <router-link :to="{path:'/user/recharge'}" tag="el-button" class="pull-right">充值</router-link>
                            <div class="inline-block pull-right" style="width:180px;height:73px;">
                                <el-menu 
                                class="el-menu-demo inline-block"
                                background-color="#252647"
                                text-color="#fff" 
                                active-text-color="#fff"                           
                                mode="horizontal" >
                                    <el-submenu index="2" class="trans"  style="height:72px;line-height:80px;border-bottom:2px solid #252647">
                                        <template slot="title" style="line-height:80px;border:none;">
                                            &#X3000;&#X3000;&#X3000; {{accountUser == 'balance' ? '真实账户':'模拟账户'}}                                                                              
                                        </template>                                       
                                        <el-menu-item index="2-1" style="width:180px;" @click="accountUser = 'vbalance'">模拟账户</el-menu-item>
                                        <el-menu-item index="2-2" style="width:180px;" @click="accountUser = 'balance'">真实账户</el-menu-item>
                                        
                                    </el-submenu>
                                </el-menu>
                                <p style="position:absolute;top:50px;text-indent: 74px;">{{this.$store.state.userInfo[this.accountUser]}}</p>
                            </div>
                           
                        </div>
                    </div> -->
                </el-col>
            </el-row> 


            <!--真实模拟账户弹窗 -->
            <!-- 弹窗背景  bg-dark-blue-->
            <div class="bg-modal" v-show="setState || closeState || userState" style="position: fixed;width: 100%;height: 100%;top: 0;bottom: 0;background-color: rgba(0,0,0,0.40);z-index:11">                   
            </div>   
            <!-- 设置 -->
            <div class="modal  modal-setting  bg-dark-blue" v-show='setState'>
                <i  class="el-icon-circle-close hand" @click="setState = false" style="position: absolute;font-size: 22px;top: -8px;right: -8px;color: #ccc;"></i>
                <div class="text-center margin-top-10">
                    <el-row style="line-height:26px;">
                        <el-col :span="8">
                            <p class="font-size-12 font-gray" style="line-height:30px;">当前价格</p>
                            <p class="font-size-14">{{this.stopLoss.currentPrice}}</p>
                        </el-col>
                         <el-col :span="8">
                            <p class="font-size-12 font-gray"  style="line-height:30px;">当前收益</p>
                            <p class="font-size-14" :class="this.stopLoss.currentEarnings > 0 ? 'font-green':'font-red'"  >{{this.stopLoss.currentEarnings}}</p>
                        </el-col>
                         <el-col :span="8">
                            <p class="font-size-12 font-gray" style="line-height:30px;">当前P/L</p>
                            <p class="font-size-14" :class="this.stopLoss.currentPrcent > 0 ? 'font-green':'font-red'">{{this.stopLoss.currentPrcent}}</p>
                        </el-col>
                    </el-row>
                </div>
                <div v-if="!profitState" class="text-center btn-group margin-top-20">
                     <el-button  @click="profitState = !profitState" class="bg-dark-blue hand">添加止盈</el-button>
                </div>
                <div v-else class="text-center btn-group margin-top-20">
                    <div><span class="font-gray">止盈</span> <span class="font-green">{{this.stopLoss.profitPrice}}</span></div>
                    <el-row>
                        <el-col :span="6" class="text-right">
                            <button style="border: 1px solid #72739C;background-color: #252647;line-height: 26px;width: 80px;border-radius: 4px;color: #fff;">保证金</button>
                        </el-col>
                        <el-col :span="14" style="position:relative">
                            <!-- <el-input
                                suffix-icon="el-icon-date"
                                v-model="stopLoss.profitPrecent" style="width: 60%;border: none;height: 30px; background: #2E3052;outline: none;border-radius: 4px;color: #fff;text-indent: 10px;">
                            </el-input> -->
                            <i  class="el-icon-plus hand font-size-14 font-green" style="position: absolute;top: 14px;left: 36px;"></i>
                            <input  type="text" v-model="stopLoss.profitPrecent" style="width: 60%;border: none;height: 30px; background: #2E3052;outline: none;border-radius: 4px;color: #fff;text-indent: 28px;">
                            <i  class=" hand font-size-14" style="position: absolute;top: 2px;right: 104px;">%</i>
                            <span>=</span>
                            <span>+{{numFilter(stopLoss.investAmount * stopLoss.profitPrecent / 100)}}</span>
                        </el-col>
                        <el-col :span="4" class="text-left">
                           <i class="el-icon-circle-close hand font-red font-size-16" @click="profitState = !profitState"></i>
                        </el-col>
                    </el-row>
                </div>
                <div v-if="!lossState" class="text-center btn-group margin-top-20">
                    <el-button @click="lossState = !lossState" class="bg-dark-blue hand">添加止损</el-button>
                </div>
                <div v-else class="text-center btn-group margin-top-20">
                    <div><span class="font-gray">止损</span> <span class="font-red">{{this.stopLoss.lossPrice}}</span></div>
                    <el-row>
                        <el-col :span="6" class="text-right">
                            <button  style="border: 1px solid #72739C;background-color: #252647;line-height: 26px;width: 80px;border-radius: 4px;color: #fff;">保证金</button>
                        </el-col>
                        <el-col :span="14" style="position:relative">
                            <i  class="el-icon-minus hand font-size-14 font-red" style="position: absolute;top: 14px;left: 36px;"></i>
                            <input type="text" v-model="stopLoss.lossPrecent" style="width: 60%;border: none;height: 30px; background: #2E3052;outline: none;border-radius: 4px;color: #fff;text-indent: 28px;">
                            <i  class=" hand font-size-14" style="position: absolute;top: 2px;right: 104px;">%</i>
                            <span>=</span>
                            <span>-{{numFilter(stopLoss.investAmount * stopLoss.profitPrecent / 100)}}</span>
                        </el-col>
                        <el-col :span="4" class="text-left">
                            <i class="el-icon-circle-close hand font-red font-size-16" @click="lossState = !lossState"></i>
                        </el-col>
                    </el-row>
                </div>
                <div class="margin-top-30">
                    <el-row class="text-center">
                        <el-col :span="12" style="height:44px;">
                            <el-button class="btn-default hand" @click="defaluteSet">默认</el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-button class="aqua-button hand" style="padding:15px;" @click="doLeverUpdate">应用</el-button>
                        </el-col>
                    </el-row>
                    
                </div>
            </div>
            <!-- 平仓弹窗 -->
            <div class="modal  modal-close  bg-dark-blue" v-show="closeState" style="width: 280px;left: calc(50% - 140px);font-size: 14px;">
                <i  class="el-icon-circle-close hand" @click="closeState = false" style="position: absolute;font-size: 22px;top: -8px;right: -8px;color: #ccc;"></i>
                <div> <span>BTC/USDT</span></div>
                <div class="text-center">
                    <p class="margin-top-10">确认平仓价格</p>
                    <p class="font-size-26 margin-top-10">{{this.stopLoss.currentPrice}}</p>
                </div>
                <div class="margin-top-30 text-center">
                    <button class="aqua-button hand" style="padding:10px 60px;border-radius:8px;" @click="doLeverClose">确认</button>
                </div>
            </div>
            <!-- 用户弹窗 -->
            <div class="modal modal-userAccount bg-dark-blue padding-0" style="border-radius:4px;" v-show="userState">
                <i  class="el-icon-circle-close hand" @click="userState = false" style="position: absolute;font-size: 22px;top: -8px;right: -8px;color: #ccc;z-index:111"></i>
                <el-row :style="{background: $store.state.accountType == 1?'#20223f':''}" style="line-height:60px;padding:30px 20px 10px;border-top-left-radius:4px;border-top-right-radius:4px; ">
                    <el-col class="text-center font-size-18" :span="12"> 
                        <i class="el-icon-circle-check hand font-size-26" :class="$store.state.accountType == 1 ?'font-aqua' : 'font-size'" style="margin-right:40px;" @click="changeAccountType(1)"></i>
                        真实账户
                    </el-col>
                    <el-col :span="12" style="position:relative">
                        <span class="font-gray font-size-16" style="position:absolute;top:-20px;">USDT</span>
                        <span class="font-green " style="vertical-align: -20px;font-size:26px;">{{$store.state.userInfo.balance}}</span>
                    </el-col>
                </el-row>
                <el-row :style="{background: $store.state.accountType == 0?'#20223f':''}" style="line-height:60px;padding:30px 20px 20px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;">
                    <el-col class="text-center font-size-18" :span="12">
                        <i class="el-icon-circle-check hand font-size-26 " :class="$store.state.accountType == 0?'font-aqua' : 'font-size'" style="margin-right:40px;" @click="changeAccountType(0)"></i>
                         模拟账户
                    </el-col>
                    <el-col :span="12" style="position:relative">
                        <span class="font-gray font-size-16" style="position:absolute;top:-20px;">USDT</span>
                        <span class="font-green" style="vertical-align: -20px;font-size:26px;">{{$store.state.userInfo.vbalance}}</span>
                    </el-col>
                </el-row>
            </div>

        </el-header>
        <el-main class="padding-0" >
             <router-view   style="height:100%;" ></router-view>
        </el-main>             
    </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex'
import {getOrderInfo,getRecharge,getTradeList,getAllHistoryOrder,leverUpdate,leverClose} from '@/ajax/index'
import socket from './../../websocket/websocket'  // socket。js
import {formatDate,numFilter} from '@/assets/js/rule'
export default {
    name: 'Transaction',
    data (){
        return {
            coin1: 'BTC/THB',
            coin2: 'USD/CAD',
            customerId:'',
            mount: '500',
            title: 'BTC',
            show:false,
            firstLoad:true,
            activeName: 'second',
            exchangeType:'',  // lever /options
            exchangeArr:[],
            holdOrderList:[], //持仓订单
            orderList:[],     // 订单数组列表
            search:'',
            accountType:'1', // 账户类型
            //accountTypeValue:1,
            // accountUser:'balance',
            selectCoin:[], //上面的切换
            currentCoinId:'',
            setState:false, // 切换设置
            closeState:false, // 切换平仓
            userState:false, //切换用户
            profitState:false,
            lossState:false,
            profitPrecent:'50%', // 止盈
            lossPrecent:'50%', //止损
            stopLoss:{
                currentPrice:'15742344',
                currentEarnings:'+3340 USDT',
                currentPrcent:'20%',
                leverTradeId:'',
                investAmount:'',  //保证金
                profitPrecent:'50', // 止盈
                lossPrecent:'50', //止损
                profitPrice:'',
                lossPrice:'',
            },
            tabs:{
                tabType:"",
                userManage:false,
                exchange:false,
            }, 
            sockOne:'',
            sockTwo:''            
        }
    },
    computed:{
        getAccountType(){
            return this.$store.state.accountType;
        },
        searchData(value){
             return this.search.toLowerCase().indexOf(search) > -1
        }
    },
    created(){
        this.getTradeListArr()  //查询币对
    },
    mounted(){ 
        this.customerId = this.$store.state.userId;           // 用户id
        this.exchangeType = this.$store.state.exchangeType   // 交易类型
        this.getUserInfoUpdate();  //更新用户信息，主要是余额
        this.getOrderList();
        if(this.$store.state.accountType === 1){
            this.getOrderListSocket(); //真实持仓订单
        }else{
            this.getOrderVListSocket() //虚拟持仓订单
        }
    },
    methods:{
        formatDate,
        numFilter,
        ...mapActions(['logOut','getUserInfoUpdate']),
        ...mapMutations(['setOrderCoinList']),
        async getOrderList(){
            var param = {
                'customerId': this.$store.state.userId,
                'accountType': this.accountType, //账户类型
            }
            let result = await getOrderInfo(param)
            if(result.code === '200' && result.data.state === '1'){
                this.setOrderCoinList(result.data.data);                           
            }
        },
        async getTradeListArr(){  //获取币对列表的
            const param = {
                'pageSize':8,
            }
            const result = await getTradeList(param)
            if(result.code === '200' && result.data.state === '1'){
                this.exchangeArr = result.data.data;   
                this.selectCoin.push(this.exchangeArr[this.$store.state.exchangeType][0])                
                this.currentCoinId = this.selectCoin[0].id;
               
            }
        },
        async getOrderList(){ // 获取订单列表的接口
            const param = {
                'customerId': this.$store.state.userId,
                'accountType': this.accountType,  //账户类U型
                'productName':'',
                'pageNum':1,
                'pageSize':10
            }
            let result = await getAllHistoryOrder(param)
            if(result.code === '200'){ 
                this.orderList = result.data.data?result.data.data:[]
            }else{
                this.$alert(result.data.message,'富易');
            }
        },
        changeisOpen(item){
            item.isopen = !item.isopen
        },
        goOrderDetail(id,transactionType) {
               // 查看历史订单详情
            this.tabs.tabType = "";
            this.$router.push({path:'orderDetail',query:{id:id,transactionType:transactionType,accountType:this.accountType}})
        },
        getOrderListSocket(){   //真实账户
            const url = 'ws://192.168.0.131:7005/lever/list/'+this.customerId
            this.sockOne = socket.createWebSocket(url)
            this.sockOne.onmessage = (event) => {    //如果获取到消息，心跳检测重置
                try{
                    let item = JSON.parse(event.data);
                    console.log(item.data)
                    if(this.firstLoad){
                        this.setObj(item.data);
                        this.holdOrderList = item.data;
                        this.firstLoad = false
                    }else{
                        this.unquire(item.data,this.holdOrderList);
                        this.holdOrderList = item.data;
                    }
                }
                catch(e){
                    console.log(event);
                }
            }
        },
        getOrderVListSocket(){  //虚拟账户
            const url = 'ws://192.168.0.131:7005/vlever/list/'+this.customerId
            this.sockTwo = socket.createWebSocket(url)
            this.sockTwo.onmessage = (event) => {    //如果获取到消息，心跳检测重置
                try{
                    let item = JSON.parse(event.data);
                    console.log(item.data)
                    if(this.firstLoad){
                        this.setObj(item.data);
                        this.holdOrderList = item.data;
                        this.firstLoad = false
                    }else{
                        this.unquire(item.data,this.holdOrderList);
                        this.holdOrderList = item.data;
                    }
                }
                catch(e){
                    console.log(event);
                }
            }
        },
        setObj(arr) {   // 递归的算法
            arr.forEach(item => {
                this.$set(item, 'isopen', false)
                Object.keys(item).forEach(key=>{
                    if(Array.isArray(item[key])){
                        return this.setObj(item[key]);
                    }
                })
                
            }) 
        },
        unquire(target,origin,){
            target.forEach((item,index) => {
                const isopen = origin[index].isopen ? true : false;   //如果有值，为true，就为true没有就是false,
                this.$set(item, 'isopen', isopen)
                 Object.keys(item).forEach(key=>{
                    if(Array.isArray(item[key])){
                        return this.unquire(item[key],origin[index][key]);
                    }
                })
                
            })
        },
        changeCoin(id) {  // 更换币对
            this.tabs.tabType = ''
            //   this.exchangeArr 所有的数组的
            if(this.$store.exchangeType != this.exchangeType){  //交易类型的切换 期权和杠杆
                //交易类型
                this.$store.commit('save', {path:'exchangeType', data:this.exchangeType})
            }
            this.exchangeArr[this.exchangeType].forEach(item => {
                if( (id == item.id) && (!this.selectCoin.includes(item)) ){
                    if(this.selectCoin.length >= 4){
                       this.selectCoin[3].id == this.currentCoinId?this.selectCoin.splice(2,1):this.selectCoin.pop()
                    }
                    this.selectCoin.push(item)
                }
            });
            this.currentCoinId = id;
        },
        deleteCoin(){   //删除货币对
            if(this.selectCoin.length >1){ 
                this.selectCoin = this.selectCoin.filter((item,index) => {
                    return item.id != this.currentCoinId;                            
                })
                this.currentCoinId = this.selectCoin[0]['id'];
            }                        
        },
        doSet(price,earning,percent,id,profitPrice,lossPrice,investAmount){   //开始设定
            this.stopLoss.currentPrice = price;        //价格
            this.stopLoss.currentEarnings = earning;  //收益
            this.stopLoss.currentPrcent = percent;   //当前p/l
            this.stopLoss.leverTradeId = id;        //订单id
            this.stopLoss.profitPrice = profitPrice;  // 止盈价格
            this.stopLoss.lossPrice = lossPrice;  //止损价格
            this.stopLoss.investAmount = investAmount; //保证金
            this.setState = true;
        },
        defaluteSet(){  //默认设置
            this.stopLoss.profitPrecent = "50%";
            this.stopLoss.lossPrecent = '50%';  
        },
        async doLeverUpdate(){  // 止盈止损
            // 止损%*/  private String stopLossRatio;
            //  止盈  private String targeProfitRatio;
            let param ={
                'accountType':this.accountTypeValue, // 必要条件
                'leverTradeId':this.stopLoss.leverTradeId
            }
            this.setState = false; //关闭弹窗
            let params =  this.stopLoss.lossPrecent != ''? param.stopLossRatio = this.stopLoss.lossPrecent:'';
            params = this.stopLoss.profitPrecent != ''? param.targeProfitRatio = this.stopLoss.profitPrecent:'';
            let result =  await leverUpdate(param);
            if( (result.code === '200')&&(result.data.state === '1') ){
                this.$alert('设置成功','富易')
            }else{
                this.$alert(result.data.message)
            }
        },
        doClose(id,price){
            this.closeState = true;
            this.stopLoss.leverTradeId  = id; // 确认下id；
            this.stopLoss.currentPrice = price;
        },
        async doLeverClose(){  // 平仓
            let param = {
                'leverTradeId':this.stopLoss.leverTradeId,
                'accountType':this.accountTypeValue
            }
            this.closeState = false;
            let result = await leverClose(param)
             if( (result.code === '200')&&(result.data.state === '1') ){
                this.$alert('平仓成功','富易')
            }else{
                this.$alert(result.data.data)
            }

        },
        changeAccountType(value){
            if(value  == this.$store.state.accountType){return false}
            this.accountType = value;
            this.userState = false;
            this.$store.commit('save',{path:'accountType',data:value.toString()});
        },
        
    },
    watch:{
        selectCoin(newValue){
            this.$store.commit('save',{path:'selectCoin',data:newValue})   //更新一下states
        },
        getAccountType(newValue){   //账户切换
            this.firstLoad = true;
            this.holdOrderList = [];  //数组做一下清空处理，不做也行，防止数据拿不到页面显示数据不对，这里还是做一下处理吧
            if(newValue === '1'){ // 当前是真实账户 
                this.sockTwo.close();
                this.getOrderListSocket(); //真实订单
            }else{ // 当前是虚拟账户
                this.sockOne.close();
                this.getOrderVListSocket() //虚拟订单
            }
            this.getOrderList() //获取历史订单
        },
        currentCoinId(newValue){
            this.$store.commit('save',{path:'currentCoinId',data:newValue})   //更新一下states
                this.selectCoin.map((item) =>{
                    if(item.id ==  newValue){
                        this.exchangeType = item.type;
                        this.$store.commit('save',{path:'exchangeType',data:this.exchangeType})
                        this.$store.commit('save',{path:'currentSysbol',data:item.sysbol}) 
                    }
                })
        }
    }
        
}
</script>

<style lang="less">
.transaction .head .el-input--prefix .el-input__inner{border: none; background-color: #6b6b99;color: #fff;}
.transaction .el-menu--horizontal>.el-submenu:focus .el-submenu__title,.transaction .el-menu--horizontal>.el-submenu:hover .el-submenu__title{background-color: #252647!important;}
.transaction .el-menu--horizontal>.el-submenu.is-active .el-submenu__title {border-bottom: 2px solid #252647!important;}
.transaction .head{
     .el-tabs__nav{ float: none;text-align: center;line-height: 60px;border-bottom: 2px solid #252647; }
                .el-tabs__item{ margin: 2px; padding: 0;width: 50%;height: 60px; line-height: 60px; color: #fff;border: none;}
                .el-tabs__active-bar{display: none;}
                .el-tabs__item.is-active{ background-color: #20223f;}
                .el-dropdown{color: #fff;}
                .el-tabs__header{margin: 0px;}
                .tabs-two-header{padding:0 24px;height: 40px;line-height: 40px;background-color: #20223f;font-size: 14px;}
                .icon-circle{display: inline-block;width: 6px;height: 6px; border-radius: 50%;background-color: #29a8d1; vertical-align: 3px;}
    .hide{display: none!important;}
}
.transaction  .tabs-content .el-tabs__content {height: 100%;}
.user-account-bg{
    border: none;
    background-color: #252647
}
</style>

<style lang="less" scoped>
@dark-blue:#252647;
@light-blue:#292a4b;
@light-bray:#3d3f63;
.transaction{
    .el-main{
        margin-top:2px;
        width:100%;height:calc(100vh - 76px);
        background: -webkit-linear-gradient(bottom, #303159 ,#1a1b37); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(bottom, #303159 ,#1a1b37) ;/* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(top, #303159 ,#1a1b37); /* Firefox 3.6 - 15 */
        background: linear-gradient(to top, #303159 ,#1a1b37); /* 标准的语法 */
    }
    .head{
        background-color: #252647;
        .el-menu--horizontal>.el-submenu .el-submenu__title{ height: 74px;line-height: 74px;border-bottom:2px solid #252647!important;}
        .el-menu--horizontal>.el-submenu .el-submenu__title:hover{background-color: #252647!important;}
        .el-popper .popper__arrow{ border-width: 0px;}
        .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{ border-bottom: none; }
       
        .el-menu.el-menu--horizontal{ border-bottom: none;}
        .el-menu--popup-bottom-start {margin-left: -36px;}
        .header-left-item{display: flex; width: 80px; height: 74px;float: left;justify-content: center;align-items: center;color: #fff;font-size: 18px;text-align: center;
            .coin-left{height: 100%; width: 160px;font-size:0px;
                .icon-circle{ font-size:18px; padding-top:30px;}
                .coin-type{font-size:18px;text-align:left;margin-top: 16px;}
            }
            .coin-right{ height: 100%; width: 60px;
               .inline-block{height: 100%; line-height: 100%;}
            }
        }
        .header-coin{ width: 236px;background-color: #3d3e63;}
        .header-left-item i{display: block;width: 30px; height: 30px;background: url('./children/img/spirit.png') no-repeat;}      
        .header-left-item p{font-size: 12px;color: #72739C;}
        .header-left-item .icon-user{ background-position:-28px -28px;}
        .header-left-item .icon-user-bg{background-position:  -28px -194px;}
        .header-left-item .icon-order{background-position:  -28px -82px;}
        .header-left-item .icon-order-bg{background-position:  -28px -248px;}
        .header-left-item .icon-message{background-position:  -28px -136px;}
        .header-left-item .icon-message-bg{background-position:  -28px -302px;}
        .header-left-item .icon-add{background-position:  -28px -362px;}
        .header-border-add{border-left: 2px solid #1a1b37;border-right: 2px solid #1a1b37;}
        .bg-dark-blue{background-color: @dark-blue;}
        .bg-light-blue{background-color: @light-blue;}     
        .bg-light-gray{background-color: @light-bray} 
        .border-left{display: inline-block; border-left:1px solid #d7d7d7;}
        // tabs-conttent
        .tabs-content{display: inline-block;width: 320px;height: calc(100% - 97px);position: fixed;top:75px;left:0px;background-color: #252647;border-top:2px solid #1a1b37;font-size:14px;color:#fff;z-index: 10;
     
        
        .icon-circle{display: inline-block; width: 34px; height: 34px; border-radius: 50%; background: url('./children/img/spirit.png') no-repeat;opacity: .7;vertical-align: -10px;}
        .tab-list {
                margin-bottom: 28px;              
                .pull-right{margin-top:10px;}
                .el-button--warning{ border:none;outline: none;font-size:18px; width: 100%;height:68px;letter-spacing: 2px;
                background: -webkit-linear-gradient(left, #e54f4f ,#e53737); /* Safari 5.1 - 6.0 */ 
                background: -o-linear-gradient(right, #e54f4f,#e53737) ;/* Opera 11.1 - 12.0 */
                background: -moz-linear-gradient(right, #e54f4f,#e53737); /* Firefox 3.6 - 15 */
                background: linear-gradient(to right, #e54f4f , #e53737); /* 标准的语法 */}
                ul{padding-left:44px; font-size: 14px;
                    li{line-height: 40px;list-style: none;
                        i{display: inline-block;width: 6px;height: 6px;border-radius: 50%;background-color: #29a8d1;vertical-align: 3px;}
                    }
                }
               
            }
        .tabs-one{
                padding: 0px 24px;
                .icon-list-user{ background-position: -30px -838px;}
                .icon-list-recharge{background-position: -30px -900px;}
                .icon-list-withdraw{background-position: -30px -966px;}
                .icon-list-management{background-position: -30px -1028px;}
                .icon-list-record{background-position: -30px -1093px;}
        }
        .tabs-kind{
            div{line-height: 26px;width: 70%;padding:8px 20px;margin-top: 20px;}
            .active{color:#4ec2e3;background-color: #20223f;}
        } 
        .tabs-two-list{
            .list-detail-1{
                padding:10px 20px 6px;
                border-radius: 10px;
                .el-button{padding: 8px 30px;color: #fff;background-color: #67688e;border: none;font-size: 12px;}
            }
        } 

        }
        .tabs-content-right{display: inline-block; width:calc(100% - 320px);height: calc(100% - 74px);position: fixed;top: 81px;left: 320px;background-color: #252647; border-top: 2px solid #1a1b37;font-size: 14px;color: #fff;z-index: 10;
            .container{width: 60%;margin: 40px auto 0;
            .div-list-input{border-radius: 10px;text-align: center;
             
            }
            .div-list{display: block; width: 100%;}
            }
        }
        .header-right-item{
            button{margin:13px 20px auto 10px;;padding: 17px 36px;border:none;outline: none;color: #fff;
                background: -webkit-linear-gradient(left, #77e0f7 ,#29a8d1); /* Safari 5.1 - 6.0 */
                background: -o-linear-gradient(right, #77e0f7,#29a8d1) ;/* Opera 11.1 - 12.0 */
                background: -moz-linear-gradient(right, #77e0f7,#29a8d1); /* Firefox 3.6 - 15 */
                background: linear-gradient(to right, #77e0f7 , #29a8d1); /* 标准的语法 */
            }
        }
        //  弹出框的样式
       .modal{
           position:absolute;
           width: 520px;
           top: 20%;
           left: calc(50% - 260px);
           padding: 20px;
           border-radius: 4px;
           box-sizing: border-box;
           z-index: 11;
       }
        .modal-setting{
             z-index: 11;
            .btn-group{
                line-height: 40px;
                .el-button{
                    line-height: 40px;
                    padding: 0;
                    width: 170px;
                    border: 1px solid #4ec2e3;
                    border-radius: 4px;              
                    color: #4ec2e3;
                    letter-spacing: 1px;
                    margin-top: 12px;
                }
            }
            .el-col-12{     
                .el-button{
                    width:208px; 
                }
                .aqua-button:hover{
                    color:#fff; 
                }
                .btn-default{
                    height:44px;
                    background: #3D3F63;
                    border: none;
                }
                .btn-default:hover{
                    color: #72739c;
                }
            } 
        }

    }
    
   
    .el-tabs__active-bar{
        left: 23%
    }
    .el-divider--horizontal{
        height:2px;
    }
}
</style>




